<template>
	<div class="plan">
		<div class="words-bg">
			<van-nav-bar title="制定计划" :border="false" right-text="切换教材" safe-area-inset-top left-arrow
				@click-left="onBack" @click-right="onRight" />
			<comPlan @getParams="getParams"></comPlan>
		</div>
		<div class="flex flex-direction">
			<button class="cu-btn lg round bg-gradual-green text-white margin-lr-xs plan-sure"
				@click="submit">确定</button>
			<div class="footer-bg"></div>
		</div>
		<van-popup v-model:show="show" :style="{'border-radius':'15px'}">
			<div>
				<div class="padding-top padding-left padding-right"
					style="font-size: 16px;text-align: center;line-height: 30px;">
					切换教材版本后，现有的计划将会被新计划替代哦～
				</div>
				<div class="flex justify-between margin-lr-sm padding-sm">
					<button class="cu-btn basis-df round line-gray text-black margin-right-sm"
						@click="show = false">取消</button>
					<button class="cu-btn basis-df round bg-gradual-green text-white margin-left-sm"
						@click="onSubmit">确定</button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script setup>
	import comPlan from "./components/comPlan.vue";
	import {
		useRouter
	} from "vue-router";
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		request
	} from "@/api/request";
	const params = ref()
	const router = useRouter();
	const show = ref(false)

	const getParams = (val) => {
		params.value = val
		// console.log(params.value)
	}
	const onRight = () => {
		show.value = true
	}
	const onSubmit = () => {
		show.value = false
		router.push('/word/recite')
	}
	const submit = async () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/updatePlan`,
			method: 'post'
		}, {
			data: params.value
		}).then(res => {
			router.push('/word')
		})
	}
	const onBack = () => {
		router.back();
	}
	
</script>

<style lang="scss" scoped>
	@import './style/icon.scss';
	@import './style/index.scss';
	@import './style/main.scss';

	:deep(.van-nav-bar) {
		color: #fff;
		background: transparent;
	}

	:deep(.van-icon-arrow-left) {
		color: #fff;
		font-size: 20px;
	}

	:deep(.van-nav-bar__title) {
		font-size: 18px;
		font-weight: 500;
		color: #fff;
	}

	.footer-bg {
		background-color: #F5F5F5;
	}

	.plan {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f5f5f5;

		:deep(.van-nav-bar__text) {
			color: #fff;
			font-weight: 500;
		}

		:deep(.van-action-bar-button--last .van-dialog__confirm) {
			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
			border-radius: 20px;
		}
	}
</style>